import { defineComponent } from "vue";
import style from "./index.module.less";
import TitleView from "../TitleView";

import Title from "../Title";
import TextGroups from "../TextGroups";
import { getSize } from "@/command/apiTool";
import { CardViewProps } from "./types";

export default defineComponent({
  name: "card-view",
  props: CardViewProps,
  setup(props, { slots }) {
    return () => {
      const renderView = () => {
        return <TextGroups data={props.data} itemWidth={props.itemWidth} />;
      };
      const renderBody = () => {
        let view = null;
        if (Array.isArray(props.data) && props.data.length > 0)
          view = renderView();
        const slotsDefault = slots.default?.();
        if (slotsDefault) {
          if (slotsDefault.length == 1) {
            if (
              slotsDefault[0].children ||
              typeof slotsDefault[0].type == "object"
            ) {
              view = slotsDefault;
            }
          } else {
            view = slotsDefault;
          }
        }
        if (view) {
          return view;
        }
      };
      return (
        <div
          class={"bg-white flex flex-col p-10 m-child-top-10 w-full"} // 帮溯源那边样式问题 去掉w-full h-full
          style={{ borderRadius: getSize(props.radius) }}
        >
          <TitleView title={props.title} right={props.right} />
          {renderBody()}
        </div>
      );
    };
  },
});
